<template>
  <div class="movie-detail" v-if="movieInfo">
    <!-- 电影基本信息区域 -->
    <div class="movie-basic">
      <div class="poster">
        <img :src="BASE_URL + movieInfo.posterUrl" :alt="movieInfo.movieName">
      </div>
      <div class="info">
        <h1>{{ movieInfo.movieName }}</h1>
        <h2>{{ movieInfo.enName }}</h2>
        <div class="score">
          <span class="number">{{ movieInfo.rating }}</span>
          <span class="total">/10</span>
        </div>
        <div class="meta">
          <p>类型：{{ movieInfo.genre }}</p>
          <p>时长：{{ movieInfo.durationMinutes }}</p>
          <p>上映时间：{{ movieInfo.releaseYearDate }}</p>
        </div>
        <button class="buy-ticket" @click="goToCinema">特惠购票</button>
      </div>
    </div>

    <!-- 剧情简介 -->
    <div class="plot">
      <h3>剧情简介</h3>
      <p>{{ movieInfo.description }}</p>
    </div>

    <!-- 演职人员 -->
    <div class="celebrities">
      <h3>演职人员</h3>
        <p class="name">{{ movieInfo.cast}}</p>
      <div class="celebrity-list">
        <div v-for="celebrity in movieInfo.celebrities" :key="celebrity.id" class="celebrity-item">
          <img :src="celebrity.avatar" :alt="celebrity.name">
          <p class="name">{{ celebrity.name }}</p>
          <p class="role">{{ celebrity.role }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const movieInfo = ref(null)

// 获取电影详情数据
const getMovieDetail = async (movieId) => {
  try {
    const response = await axios.get(BASE_URL+'/v1/movie/selectById/'+`${movieId}`)
    movieInfo.value = response.data.data;
  } catch (error) {
    console.error('获取电影详情失败:', error)
  }
}

// 添加跳转函数
const goToCinema = () => {
  router.push({
    path: '/cinema',
    query: {
      movieId: route.params.id
    }
  })
}

onMounted(() => {
  // 从路由参数中获取电影ID
  const movieId = route.params.id
  getMovieDetail(movieId)
})
</script>

<style scoped>
.movie-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.movie-basic {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}

.poster img {
  width: 240px;
  border-radius: 8px;
}

.info {
  flex: 1;
}

.score {
  margin: 20px 0;
}

.score .number {
  font-size: 36px;
  color: #ffb400;
}

.meta p {
  margin: 8px 0;
  color: #666;
}

.buy-ticket {
  margin-top: 20px;
  padding: 12px 30px;
  background-color: #ff5f16;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

.plot, .celebrities {
  margin-top: 40px;
}

.celebrity-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
}

.celebrity-item {
  text-align: center;
  min-width: 120px;
}

.celebrity-item img {
  width: 120px;
  height: 160px;
  border-radius: 4px;
  object-fit: cover;
}

.celebrity-item .name {
  margin: 8px 0 4px;
  font-weight: bold;
}

.celebrity-item .role {
  color: #666;
  font-size: 14px;
}
</style>
